<template>
  <div class="container">
    <div class="header">
      登录
    </div>

    <div class="form-group">
      <input
        v-model="loginData.username"
        class="input"
        type="text"
        placeholder="请输入手机号"
        @input="validateMobile"
      >
      <div v-if="validationErrors.username" class="error-message">
        {{ validationErrors.username }}
      </div>

      <input
        v-model="loginData.password"
        class="input"
        type="password"
        placeholder="请输入6-12位密码"
        @keyup.enter="handleLogin"
      >
      <div v-if="validationErrors.password" class="error-message">
        {{ validationErrors.password }}
      </div>
    </div>

    <button class="login-button" :disabled="isLoggingIn" @click="handleLogin">
      <span v-if="!isLoggingIn">登录</span>
      <span v-else>登录中...</span>
    </button>

    <div class="footer">
      <span class="tips">首次登录将自动注册账号</span>
    </div>

    <!-- 角色选择弹窗 -->
    <div class="role-modal" :class="{ active: showRoleDialog }">
      <div class="modal-content">
        <div class="modal-header">
          请选择您的身份
        </div>
        <div class="role-options">
          <div class="role-option" @click="selectRole('self')">
            <div class="role-icon self">
              👤
            </div>
            <div class="role-info">
              <h3>本人</h3>
              <p>管理自己的健康数据</p>
            </div>
          </div>

          <div class="role-option" @click="selectRole('family')">
            <div class="role-icon family">
              👪
            </div>
            <div class="role-info">
              <h3>家属</h3>
              <p>查看家人的健康数据</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
const loginData = reactive({
  username: '15119243720',
  password: '123456',
});

const validationErrors = reactive({
  username: '',
  password: '',
});

const showRoleDialog = ref(false);
const isLoggingIn = ref(false);

// 验证手机号格式
const validateMobile = () => {
  if (!loginData.username) {
    validationErrors.username = '';
    return;
  }

  const mobileRegex = /^1[3-9]\d{9}$/;
  if (!mobileRegex.test(loginData.username)) {
    validationErrors.username = '请输入有效的手机号码';
  } else {
    validationErrors.username = '';
  }
};

// 处理登录逻辑
const handleLogin = async () => {
  // 重置错误信息
  validationErrors.username = '';
  validationErrors.password = '';

  let isValid = true;

  // 验证手机号
  if (!loginData.username.trim()) {
    validationErrors.username = '手机号不能为空';
    isValid = false;
  } else if (validationErrors.username) {
    isValid = false;
  }

  // 验证密码
  if (!loginData.password.trim()) {
    validationErrors.password = '密码不能为空';
    isValid = false;
  } else if (loginData.password.length < 6 || loginData.password.length > 12) {
    validationErrors.password = '密码长度必须为6-12位';
    isValid = false;
  }

  if (!isValid) return;

  isLoggingIn.value = true;
  showRoleDialog.value = true;
};

// 选择角色
const selectRole = async (role) => {
  // showRoleDialog.value = false;

  console.log(`已选择角色: ${role === 'self' ? 'PERSON' : 'FAMILY'}`);
  const response = await $api.postDietAppUserLogin(
    {
      phone: loginData.username,
      password: loginData.password,
      role: role === 'self' ? 'PERSON' : 'FAMILY',
    },
    { notifyApiError: false },
  );
  switch (response.__error) {
    case undefined:
      console.log('登录成功');
      showRoleDialog.value = false;
      break;
    default:
      console.log(123312);
      console.log('未接我');
      isLoggingIn.value = false;
  }
  // 实际项目中根据角色跳转不同页面
  // if (role === 'self') {
  //   router.push('/personal-dashboard');
  // } else {
  //   router.push('/family-management');
  // }
};
</script>

<style scoped>
.container {
  min-height: 100vh;
  background-color: #f5f6fa;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 0;
  position: relative;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.header {
  font-size: 36px;
  font-weight: bold;
  color: #333;
  margin: 40px 0 60px;
}

.form-group {
  width: 85%;
  margin-bottom: 40px;
}

.input {
  width: 100%;
  height: 50px;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 0 15px;
  font-size: 16px;
  margin-bottom: 25px;
  background-color: #fff;
  transition: all 0.3s ease;
}

.input:focus {
  border-color: #4a90e2;
  box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.3);
  outline: none;
}

.error-message {
  color: #e74c3c;
  font-size: 14px;
  margin-top: -20px;
  margin-bottom: 15px;
  height: 20px;
}

.login-button {
  width: 85%;
  height: 50px;
  background-color: #4a90e2;
  color: white;
  border: none;
  border-radius: 25px;
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 30px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.login-button:disabled {
  background-color: #a0c4ff;
  cursor: not-allowed;
}

.login-button:not(:disabled):hover {
  background-color: #357ae8;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.login-button:not(:disabled):active {
  transform: translateY(0);
}

.footer {
  width: 85%;
  color: #666;
  font-size: 14px;
  text-align: center;
}

.footer .tips {
  margin: 0 auto;
}

.role-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.role-modal.active {
  opacity: 1;
  pointer-events: all;
}

.modal-content {
  background: white;
  border-radius: 15px;
  width: 85%;
  max-width: 400px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  transform: translateY(20px);
  transition: transform 0.3s ease;
}

.role-modal.active .modal-content {
  transform: translateY(0);
}

.modal-header {
  background-color: #4a90e2;
  color: white;
  padding: 20px;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
}

.role-options {
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.role-option {
  display: flex;
  align-items: center;
  padding: 20px;
  margin-bottom: 15px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid #f0f0f0;
}

.role-option:last-child {
  margin-bottom: 0;
}

.role-option:hover {
  border-color: #4a90e2;
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.role-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  font-size: 24px;
  color: white;
}

.role-icon.self {
  background: linear-gradient(to right, #ff7e5f, #feb47b);
}

.role-icon.family {
  background: linear-gradient(to right, #1d976c, #93f9b9);
}

.role-info h3 {
  font-size: 18px;
  color: #333;
  margin-bottom: 5px;
}

.role-info p {
  font-size: 14px;
  color: #666;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.container {
  animation: fadeIn 0.5s ease-out;
}
</style>
